<script setup lang="ts">
import { ref } from 'vue'
import * as echarts from 'echarts'
import { onMounted } from 'vue'

const healthData = ref({
  heartRate: { value: 75, unit: 'BPM', time: '实时' },
  bloodPressure: { value: '120/80', unit: 'mmHg', time: '实时' }
})

const healthSuggestions = ref([
  { level: 'error', text: '脉搏频率比正常值偏高，建议及时就医检查', time: '今天 1-2点期间' },
  { level: 'warning', text: '流动性较好，建议多喝水保持身体水分', time: '1-5天之间' },
  { level: 'info', text: '饮食建议', time: '1-5天之间' }
])

const initChart = () => {
  const chartDom = document.getElementById('healthTrend')
  const myChart = echarts.init(chartDom)
  const option = {
    grid: {
      top: 40,
      left: 40,
      right: 40,
      bottom: 40
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['心率', '血压'],
      top: 0
    },
    xAxis: {
      type: 'category',
      data: ['95分钟', '40分钟', '20分钟', '现在'],
      axisLine: {
        lineStyle: {
          color: '#E5E5E5'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '心率',
        min: 60,
        max: 100,
        interval: 10,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#409EFF'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E5E5E5',
            type: 'dashed'
          }
        }
      },
      {
        type: 'value',
        name: '血压',
        min: 80,
        max: 160,
        interval: 20,
        position: 'right',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#F56C6C'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '心率',
        type: 'line',
        data: [80, 75, 70, 75],
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: '#409EFF'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(64,158,255,0.2)'
            }, {
              offset: 1,
              color: 'rgba(64,158,255,0)'
            }]
          }
        }
      },
      {
        name: '血压',
        type: 'line',
        yAxisIndex: 1,
        data: [120, 125, 118, 120],
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: '#F56C6C'
        }
      }
    ]
  }
  myChart.setOption(option)
}

onMounted(() => {
  initChart()
})
</script>

<template>
  <div class="overview-container">
    <!-- 血压预警提示 -->
    <el-alert
      title="血压异常"
      type="error"
      description="您的收缩压已超出正常范围，建议及时就医检查"
      show-icon
      :closable="false"
      class="mb-4"
    />

    <!-- 健康监测面板 -->
    <el-card shadow="hover" class="mb-4 health-monitor">
      <div class="monitor-header">
        <div class="monitor-item">
          <div class="monitor-label">实时心率</div>
          <div class="monitor-value">
            <span class="value">{{ healthData.heartRate.value }}</span>
            <span class="unit">{{ healthData.heartRate.unit }}</span>
          </div>
          <div class="monitor-time">{{ healthData.heartRate.time }}</div>
        </div>
        <div class="monitor-divider"></div>
        <div class="monitor-item">
          <div class="monitor-label">血压</div>
          <div class="monitor-value">
            <span class="value">{{ healthData.bloodPressure.value }}</span>
            <span class="unit">{{ healthData.bloodPressure.unit }}</span>
          </div>
          <div class="monitor-time">{{ healthData.bloodPressure.time }}</div>
        </div>
      </div>
      <div id="healthTrend" style="height: 300px; margin-top: 20px"></div>
    </el-card>

    <!-- 健康目标 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="16">
        <el-card shadow="hover" class="health-goals">
          <template #header>
            <div class="card-header">
              <span>健康目标</span>
            </div>
          </template>
          <div class="goal-item">
            <div class="goal-info">
              <span class="goal-label">每日步数</span>
              <span class="goal-progress">6500 / 10000 步</span>
            </div>
            <el-progress :percentage="65" :show-text="false" />
          </div>
          <div class="goal-item">
            <div class="goal-info">
              <span class="goal-label">血压达标</span>
              <span class="goal-progress">120/150 分钟</span>
            </div>
            <el-progress :percentage="80" :show-text="false" />
          </div>
          <div class="goal-item">
            <div class="goal-info">
              <span class="goal-label">每日饮水量</span>
              <span class="goal-progress">1.5/2 升</span>
            </div>
            <el-progress :percentage="75" :show-text="false" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="health-suggestions">
          <template #header>
            <div class="card-header">
              <span>健康建议</span>
            </div>
          </template>
          <div class="suggestion-list">
            <div v-for="(item, index) in healthSuggestions" :key="index" class="suggestion-item" :class="item.level">
              <div class="suggestion-text">{{ item.text }}</div>
              <div class="suggestion-time">{{ item.time }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.overview-container {
  padding: 24px;
  background-color: #f5f7fa;
  border-radius: 8px;
  min-height: calc(100vh - 48px);
}

.mb-4 {
  margin-bottom: 16px;
}

.health-monitor {
  background-color: #fff;
  border-radius: 8px;
}

.monitor-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px 0;
}

.monitor-item {
  text-align: center;
  flex: 1;
}

.monitor-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.monitor-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.monitor-value .unit {
  font-size: 14px;
  color: #909399;
  margin-left: 4px;
}

.monitor-time {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.monitor-divider {
  width: 1px;
  height: 40px;
  background-color: #E5E5E5;
}

.health-goals {
  height: 100%;
}

.goal-item {
  margin-bottom: 16px;
}

.goal-item:last-child {
  margin-bottom: 0;
}

.goal-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.goal-label {
  font-size: 14px;
  color: #606266;
}

.goal-progress {
  font-size: 14px;
  color: #909399;
}

.health-suggestions {
  height: 100%;
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suggestion-item {
  padding: 12px;
  border-radius: 6px;
  background-color: #f5f7fa;
}

.suggestion-item.error {
  background-color: #fef0f0;
  border-left: 4px solid #f56c6c;
}

.suggestion-item.warning {
  background-color: #fdf6ec;
  border-left: 4px solid #e6a23c;
}

.suggestion-item.info {
  background-color: #f4f4f5;
  border-left: 4px solid #909399;
}

.suggestion-text {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

.suggestion-time {
  font-size: 12px;
  color: #909399;
}
</style>
